<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2024/6/7
  Time: 11:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(45deg, #f0f0f0, #e0e0e0); /* 页面背景渐变 */
            margin: 0;
            padding: 0;
        }
        table {
            width: 1200px;
            border-collapse: collapse;
            margin: 50px auto; /* 表格居中 */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* 更深的阴影 */
            border-radius: 15px; /* 更大的圆角 */
            overflow: hidden; /* 确保表格内部元素不会超出圆角范围 */
            animation: fadeIn 1s ease-in-out; /* 添加淡入动画 */
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        tr, td {
            border: 1px solid #ccc;
            padding: 12px 20px;
            text-align: center;
            transition: background-color 0.3s ease, transform 0.3s ease; /* 平滑的过渡效果 */
        }
        td {
            height: 60px;
        }
        th {
            font-weight: bold;
            background: linear-gradient(45deg, #607d8b, #506375); /* 更深的表头渐变背景 */
            color: #fff;
            padding: 18px;
            border-bottom: 3px solid #455a64; /* 更粗的表头底部边框 */
        }
        .row{
            background-color: #4CAF50;
            font-weight: bold;
        }
        .con-b {
            width: 100%;
        }
        .con-b tr:nth-of-type(odd) {
            background-color: #fafafa; /* 奇数行背景色 */
        }
        .con-b tr:hover {
            background-color: #e0e0e0; /* 鼠标悬停时行的背景色 */
            transform: scale(1.01); /* 鼠标悬停时轻微放大 */
        }
        .lf {
            width: 15%; /* 左侧列宽度 */
            text-align: left; /* 左侧列文本左对齐 */
            padding-left: 20px; /* 左侧列内边距 */
        }
        .rg {
            width: 85%; /* 右侧列宽度 */
        }
        .action-button {
            padding: 10px 20px;
            background-color: #66bb6a; /* 更亮的绿色按钮 */
            color: white;
            border: none;
            border-radius: 8px; /* 更大的按钮圆角 */
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease; /* 按钮动画过渡效果 */
        }
        .action-button:hover {
            background-color: #50a350; /* 按钮悬停时更深的绿色 */
            transform: scale(1.1); /* 按钮悬停时放大效果 */
        }
        .action-icon {
            width: 35px;
            height: 35px;
            cursor: pointer;
            transition: transform 0.3s ease; /* 图标动画过渡效果 */
        }
        .action-icon:hover {
            transform: scale(1.2); /* 图标悬停时放大效果 */
        }
    </style>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
</head>
<body>
<table border="0" cellspacing="0" align="center" class="con-b">
    <thead>
    <tr class="row" style="color: black;font-size: 28px">
        <td class="lf">题目</td>
        <td>答案</td>
        <td class="lf">是否完成</td>
        <td class="lf">分数</td>
        <c:if test="${session_person.getUserIdentify()==0}"><td class="lf">开始答题</td></c:if>
        <td>删除</td>
    </tr>
    </thead>
    <tbody>
    <c:forEach items="${arr}" var="stuTask">
        <tr>
            <c:if test="${session_person.getUserIdentify()!=0}"><td class="lf">${stuTask.getUserName()}</td></c:if>
            <td class="lf">${stuTask.getTaskName()}</td>
            <td class="lf">${stuTask.getStudentAnswer()}</td>
            <td class="lf">
                <c:if test="${stuTask.getIsFinish()==0}">
                    <span style="color: red">未完成</span>
                </c:if>
                <c:if test="${stuTask.getIsFinish()==1}">
                    <span style="color: orange">未批改</span>
                </c:if>
                <c:if test="${stuTask.getIsFinish()==2}">
                    <span style="color: green">完成</span>
                </c:if>
            </td>
            <td class="lf">${stuTask.getIsScore()}</td>
            <c:if test="${session_person.getUserIdentify()==0}"><td class="lf"><button class="action-button" onclick="doAnswer('${stuTask.getTaskAccount()}','${stuTask.getIsFinish()}')">开始答题</button></td></c:if>
            <td> <img class="action-icon" src="del.jpg" onclick="delThisTask('${stuTask.getTaskAccount()}','${stuTask.getStudentAccount()}',${stuTask.getIsFinish()})"> </td>
        </tr>
    </c:forEach>
    </tbody>
</table>
</body>
<script>
    function doAnswer(taskAccount, isFinish) {
        if (isFinish != 0) {
            alert("已经作答！");
            return;
        }
        window.open("student.action?action=doAnswer&taskAccount=" + taskAccount, null, "width=700,height=400,left=400,top=150", true);
    }
    function delThisTask(taskAccount, studentAccount, isFinish) {
        if (${session_person.getUserIdentify()==1}) {
            if (isFinish == 1) {
                alert("老师未做批改，不能删除！");
            } else {
                window.location.href = "tea.action?action=deleteTask&taskAccount=" + taskAccount + "&studentAccount=" + studentAccount + "&isFinish=" + isFinish;
            }
        } else {
            if (isFinish == 2) {
                // 这里可能需要添加相应的处理逻辑，当前为空
            } else {
                alert("任务正在进行，不能删除");
            }
        }
        alert("删除 题目号：" + taskAccount + " 学生：" + studentAccount);
    }
    function upThisPerson(userAccount) {
        alert("修改:" + userAccount);
    }
</script>
</html>